<nb-card>
  <nb-card-header>
    Toaster configuration
  </nb-card-header>
  <nb-card-body>
    <toaster-container [toasterconfig]="config"></toaster-container>

    <div class="row">
      <div class="col-md-6 col-sm-12">
        <div class="form-group">
          <label class="form-control-label">Place to show toast:</label>
          <div class="dropdown" ngbDropdown>
            <button class="btn btn-primary" type="button" ngbDropdownToggle>
              {{ position }}
            </button>
            <ul ngbDropdownMenu class="dropdown-menu">
              <li class="dropdown-item" *ngFor="let p of positions" (click)="position = p">
                {{ p }}
              </li>
            </ul>
          </div>
        </div>
        <div class="form-group">
          <label class="form-control-label">Animation type:</label>
          <div class="dropdown" ngbDropdown>
            <button class="btn btn-primary" type="button" ngbDropdownToggle>
              {{ animationType }}
            </button>
            <ul ngbDropdownMenu class="dropdown-menu">
              <li class="dropdown-item" *ngFor="let at of animations" (click)="animationType = at">
                {{ at }}
              </li>
            </ul>
          </div>
        </div>
        <div class="form-group">
          <label class="form-control-label">Title:</label>
          <input class="form-control" [(ngModel)]="title" name="title">
        </div>
        <form>
          <div class="form-group">
            <label class="form-control-label">Content:</label>
            <input class="form-control" [(ngModel)]="content" name="content">
          </div>
        </form>
        <div class="form-group">
          <label class="form-control-label">Time to hide toast, ms. 0 to persistent toast:</label>
          <input class="form-control" type="number" [(ngModel)]="timeout"name="timeout">
        </div>
      </div>

      <div class="col-md-6 col-sm-12">
        <div class="form-group">
          <label class="form-control-label">Limit number of toasts:</label>
          <input class="form-control" type="number" [(ngModel)]="toastsLimit" name="limit">
        </div>
        <div class="form-group">
          <label class="form-control-label">Toast type:</label>
          <div class="dropdown" ngbDropdown>
            <button class="btn btn-primary" type="button" ngbDropdownToggle>
              {{ type }}
            </button>
            <ul ngbDropdownMenu class="dropdown-menu">
              <li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
            </ul>
          </div>
        </div>

        <div><nb-checkbox [(ngModel)]="isNewestOnTop">Newest on top</nb-checkbox></div>
        <div><nb-checkbox [(ngModel)]="isHideOnClick">Hide on click</nb-checkbox></div>
        <div><nb-checkbox [(ngModel)]="isDuplicatesPrevented">Prevent arising of duplicate toast</nb-checkbox></div>
        <div><nb-checkbox [(ngModel)]="isCloseButton">Close button</nb-checkbox></div>
      </div>
    </div>
  </nb-card-body>

  <nb-card-footer>
    <button class="btn btn-primary" (click)="makeToast()">Show toast</button>
    <button class="btn btn-success" (click)="openRandomToast()">Random toast</button>
    <button class="btn btn-danger" (click)="clearToasts()">Clear all toasts</button>
  </nb-card-footer>
</nb-card>
